<template>
    <div>
        <el-row class="query">
            <!--      左      -->
            <el-col :span="18">
                <el-col :span="24">找到 {{count}} 条符合 <span>{{title}}</span> 条件的作品</el-col>
                <el-col :span="24" class="leftList" v-for="i in SearchBookList">
                    <el-col>
                        <img style="width: 100%" :src="i.url" alt="">
                    </el-col>
                    <el-col>
                        <p>{{i.title}}</p>
                        <p>作者：{{i.author}}</p>
                        <p>{{i.introduction}}</p>
                    </el-col>
                </el-col>
            </el-col>
            <!--      右      -->
            <el-col :span="6" class="rightQuery">
                <el-col :span="24">搜索排行</el-col>
                <el-col :span="24">
<!--                    <el-col :span="24" class="rightList">-->
<!--                        <el-col>-->
<!--                            <img style="width: 100%" :src="i.url" alt="">-->
<!--                        </el-col>-->
<!--                        <el-col>-->
<!--                            <p>{{i.title}}</p>-->
<!--                            <p>作者：{{i.author}}</p>-->
<!--                            <p>{{i.introduction}}</p>-->
<!--                        </el-col>-->
<!--                    </el-col>-->
                </el-col>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "SearchView",
        data() {
            return {
                count:"",
                title: "",
                SearchBookList:[]
            }
        },
        methods:{
            loadSearchBookList(){
                let url = "http://localhost:9080/books/lookup?title="+this.title
                this.axios.get(url).then((response) => {
                    let responseBody = response.data
                    console.log(response.data)
                    this.SearchBookList = responseBody.data;
                    this.count = responseBody.data.length
                })
            }
        },
        mounted() {
            this.title = this.$route.query.name
            console.log(this.title)
            this.loadSearchBookList()
        }

    }
</script>

<style>
    .query {
        width: 1000px;
        margin: 0 auto;
        padding: 0;
    }

    .query > div:nth-child(1) > div:nth-child(1) {
        color: #383b43;
        font-size: 18px;
        height: 30px;
        line-height: 30px;
        text-align: left;
        border-bottom: 2px solid #ee7700;
        margin-bottom: 15px;
    }

    .query > div:nth-child(1) > div:nth-child(1) > span {
        color: #ee7700;
    }

    .leftList {
        border-bottom: 1px solid #ccc;
        padding: 28px 9px 16px;
    }

    .leftList > div:nth-child(1) {
        padding: 6px 10px 15px 11px;
        width: 125px !important;
    }

    .leftList > div:nth-child(2) {
        width: calc(100% - 125px) !important;
        text-align: left;
        padding-left: 8px;
    }

    .leftList > div:nth-child(2) > p:nth-child(1) {
        font-size: 18px;
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 18px;
    }

    .leftList > div:nth-child(2) > p:nth-child(2) {
        line-height: 26px;
        font-size: 12px;
    }

    .leftList > div:nth-child(2) > p:nth-child(3) {
        color: #666;
        font-size: 12px;
        line-height: 20px;
        margin-top: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .query > div:nth-child(2) {
        padding-left: 15px;

    }

    .rightQuery > div:nth-child(1) {
        color: #383b43;
        font-size: 18px;
        height: 30px;
        text-align: left;
        border-bottom: 2px solid #ee7700;
    }

    .rightQuery > div:nth-child(2) {
        padding: 20px 0 33px;
    }

    .rightList {
        margin-bottom: 28px;
    }

    .rightList > div:nth-child(1) {
        width: 104px !important;
        padding: 0 11px 0 7px !important;
    }

    .rightList > div:nth-child(1) > img {
        border: 1px solid #d1d1d1;
        width: 89px;
        box-shadow: 0px 2px 8px #cccccc;
    }

    .rightList > div:nth-child(2) {
        width: calc(100% - 104px) !important;
    }

    .rightList > div:nth-child(2) > p:nth-child(1) {
        font-size: 14px;
        margin: 0 0 7px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .rightList > div:nth-child(2) > p:nth-child(2) {
        font-size: 12px;
        color: #9e9e9e;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }

    .rightList > div:nth-child(2) > p:nth-child(3) {
        font-size: 12px;
        color: #9e9e9e;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
    }
</style>
